<template>
  <div class="app-container">
    <!-- 图片素材新增 -->
    <h5 class="titleInfo">基础数据</h5>
    <el-form ref="form"  :inline="true" :model="form" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="素材描述">
            <el-input v-model="form.title" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="分享描述">
            <el-input v-model="form.shareDesc" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属分类">
            <el-select v-model="form.type" placeholder="请选择" clearable>
              <el-option
                v-for="item in typeList"
                :key="item.type"
                :label="item.name"
                :value="item.type"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属省份">
            <el-select v-model="form.province" placeholder="请选择" clearable>
               <el-option label="全国" :value="0" />
              <el-option
                v-for="item in options"
                :key="item.path"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="排序">
            <el-input v-model="form.sort" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="封面图">
            <newUpload ref="uploadImg" :file-num="fileNum" :height="400" :width="400" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="素材视频">
            <uploadVideo
              ref="uploadImg1"
              :file-num="fileNum"
              :duration="duration"
              :file-list="fileList1"
              @callfun="callfun"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              active-text="正常"
              inactive-text="下架"
              active-color="#13ce66"
              inactive-color="#eee"
              :active-value="0"
              :inactive-value="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否推荐">
            <el-switch
              v-model="form.isRecom"
              active-text="推荐"
              inactive-text="不推荐"
              active-color="#13ce66"
              inactive-color="#eee"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button
          style="margin-top:30px;margin-left:130px"
          type="primary"
          @click="submitFn('form')"
        >立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import uploadVideo from '@/components/uploadVideo/index'
import newUpload from '@/components/imgUpload/index'
import { materialVideoListAdd } from '@/api/materialVideo'
import { materialtypeList } from '@/api/materialPlace'
import { regionDropDown } from '@/api/area'
export default {
  name: 'MaterialVideoAdd',
  components: { uploadVideo, newUpload },
  filters: {
    filterNull(e) {
      if (!e) {
        return '暂无'
      } else {
        return e
      }
    },
    cardNull(e) {
      return window.helper.cardType(e)
    },
    userFocus(e) {
      return window.helper.userFocus(e)
    }
  },
  data() {
    return {
      fileList1: '',
      duration: 0,
      typeList: [],
      fileNum: 1,
      options: [],
      form: {
        sort: null,
        title: '',
        type: null,
        miniUrl: '',
        url: '',
        status: null,
        province: null,
        isRecom: null,
        shareDesc: ''
      }
    }
  },
  mounted() {
    this.getArea()
    this.getTypeList()
  },
  methods: {
    callfun(res) {
      console.log(res)
      setTimeout(() => {
        this.duration = this.$refs.uploadImg1.$refs.video.duration
      }, 500)
      this.form.url = res.url
      this.fileList1 = localStorage.getItem('imgUrlPrefix') + res.url
    },
    // 获取类型下拉列表
    getTypeList() {
      const datas = {}
      materialtypeList(datas).then(res => {
        this.typeList = res.data.data
      })
    },
    // 省市区
    getArea() {
      regionDropDown().then(res => {
        const newArr = []
        res.data.data.forEach((item1, index) => {
          newArr.push({
            value: item1.id,
            label: item1.name
          })
        })
        this.options = newArr
      })
    },
    // 提交
    submitFn(e) {
      console.log(this.form)
      console.log(this.$refs.uploadImg.submitUpload())
      this.$refs['form'].validate(valid => {
        if (valid) {
          // if (this.duration >= 15) {
          //   this.$message.error('不能大于15s')
          //   return false
          // }
          this.form.miniUrl = this.$refs.uploadImg.submitUpload()
          //  this.form.url = this.$refs.uploadImg1.submitUpload()
          this.form.miniUrl = this.form.miniUrl.join(',')
          // this.form.url = this.form.url.join(",");
          const datas = this.form
          materialVideoListAdd(datas).then(res => {
            if (res.data.code == 0) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
              this.$router.push('/materialVideoIndex')
            } else {
              this.$message({
                message: res.data.msg,
                type: 'warning'
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
</style>
